<template>
	<a-tree-select
		v-model="defaultValue"
		allow-clear
		:tree-data="treeData"
		:tree-default-expanded-keys="treeDefaultExpandedKeys"
		:show-checked-strategy="SHOW_PARENT"
		:replace-fields="{
			title: 'area_name_all',
			key: 'area_code',
			value: 'area_code',
		}"
		:placeholder="placeholder"
		:tree-checkable="!radio"
		:size="size"
		:style="{
			width: width,
		}"
		@change="handleChange"
	/>
</template>

<script>
	import systemAreaType from "@/api/systemAreaType"
	import { TreeSelect } from "ant-design-vue"
	const SHOW_PARENT = TreeSelect.SHOW_PARENT

	export default {
		model: {
			//event:什么时候触发v-model行为
			event: "change-system-area",
			// 定义传递给v-model的那个变量，绑定到哪个属性值上
			prop: "systemAreaValue",
		},
		props: {
			code: {
				type: [String, Number],
				default: () => {
					return undefined
				},
			},
			width: {
				type: String,
				default: "230px",
			},
			radio: {
				type: Boolean,
				default: false,
			},
			extData: {
				// 父元素传递的数据， 原封不动 回调
				type: [Number, String, Array, Object],
				default: null,
			},
			systemAreaValue: {
				type: [Number, String, Array],
				default: () => {
					return null
				},
			},
			placeholder: {
				type: String,
				default: "请选择",
			},
			size: {
				type: String,
				default: "default",
			},
		},
		data() {
			return {
				systemAreaType: undefined,
				treeData: undefined,
				mapData: undefined,
				defaultValue: this.$func.isArray(this.systemAreaValue)
					? this.systemAreaValue
					: this.$func.isString(this.systemAreaValue) && this.systemAreaValue
					? [this.systemAreaValue]
					: this.$func.isNumber(this.systemAreaValue)
					? [this.systemAreaValue]
					: undefined,
				SHOW_PARENT,
			}
		},
		computed: {
			treeDefaultExpandedKeys() {
				if (this.$func.isArray(this.systemAreaValue)) return this.systemAreaValue

				if (
					this.$func.isString(this.systemAreaValue) &&
					this.systemAreaValue != ""
				)
					return [this.systemAreaValue]

				if (this.$func.isNumber(this.systemAreaValue))
					return [this.systemAreaValue]

				return []
			},
		},
		// mounted() {
		// 	console.log(this.defaultValue)
		// },
		watch: {
			code() {
				this.getSystemArea()
			},
			systemAreaValue() {
				this.defaultValue = undefined
				if (this.$func.isArray(this.systemAreaValue)) {
					this.defaultValue = this.systemAreaValue
					return
				}
				if (this.$func.isString(this.systemAreaValue) && this.systemAreaValue) {
					this.defaultValue = [this.systemAreaValue]
					return
				}
				if (this.$func.isNumber(this.systemAreaValue)) {
					this.defaultValue = [this.systemAreaValue]
					return
				}
			},
		},
		mounted() {
			this.getSystemArea()
			console.log(this.defaultValue)
		},
		methods: {
			getSystemArea() {
				if (!this.code) {
					return
				}
				systemAreaType.cache(this.code).then((response) => {
					console.log("省市区", response)
					if (response.code !== 1 || !response.data) {
						return
					}
					this.systemAreaType = response.data.data_type
					this.treeData = response.data.data_menu
					this.mapData = response.data.data_map
				})
			},
			handleChange(value) {
				let changeObj = null
				if (this.radio) {
					if (value) {
						if (Object.prototype.hasOwnProperty.call(this.mapData, value)) {
							changeObj = this.mapData[value]
						}
					}
				} else {
					if (this.$func.isArray(value) && value.length > 0) {
						changeObj = []
						for (let ii in value) {
							if (Object.prototype.hasOwnProperty.call(this.mapData, value[ii])) {
								changeObj.push(this.mapData[value[ii]])
							}
						}
					}
				}

				this.$emit("change-system-area", value)
				this.$emit("change", changeObj, this.extData)
			},
		},
	}
</script>

<style lang="less" type="text/less" scoped></style>
